import {ref,onMounted,onUnmounted,computed} from 'vue'
import {filterTodoList} from '../utils/config'
let hashArr = ['active','completed','all'];
export default function filterTodo(todoLists){
    let visibility = ref('all');
    let hashChangeEvent=()=>{
        let hash = location.hash.replace(/#\/?/,'');
        if(hashArr.includes(hash)){
            visibility.value = hash;
        }else{
            location.hash = '';
            visibility.value = 'all';
        }
    };
    
    onMounted(()=>{
        window.addEventListener('hashchange',hashChangeEvent)
    });
    onUnmounted(()=>{
        window.removeEventListener('hashchange',hashChangeEvent)
    });
    let filterTodoListRef = computed(()=>{ return filterTodoList(todoLists.value,visibility.value)});

    let activeTodoListRef = computed(()=>{ return filterTodoList(todoLists.value,'active')});

    let finishedTodoListRef = computed(()=>{ return filterTodoList(todoLists.value,'completed')});
    let activeLen = computed(()=>{return filterTodoList(todoLists.value,'active').length}); 
    let completedLen = computed(()=>{return filterTodoList(todoLists.value,'completed').length});
    return {
        visibility,
        filterTodoListRef,
        activeTodoListRef,
        finishedTodoListRef,
        activeLen,
        completedLen
    }
}